<template>
	<view class="page">
		<!-- <u-navbar title="更换手机号" :placeholder="true"   :autoBack="true" rightText="保存" @rightClick="rightClick"></u-navbar> -->
		<headerinfo></headerinfo>
<!-- <headertop :inv="5"></headertop> -->
		<backos></backos>
		<view class="login_form">
			<view class="list">
				<view class="label ">原手机号</view>
				<u--input type="number" maxlength="11" fontSize="15" border="none" placeholder="请输入原手机号" v-model="Phone"></u--input>
			</view>
			<view class="list">
				<view class="label ">新手机号</view>
				<u--input type="number" maxlength="11" fontSize="15" border="none" placeholder="请输入新手机号" v-model="form.newPhone"></u--input>
			</view>
			<view class="list">
				<view class="label ">验证码</view>
				<u--input type="number" fontSize="15" border="none" placeholder="请输入验证码" v-model="form.code"></u--input>
				<span  @tap="getCode" style="color: #08C060;margin-right: 20rpx;">{{tips}}</span>
			</view>
			
		</view>
		
		<view class="loginBtn main-bg-color" @click="rightClick">提 交</view>
		
		<u-code :seconds="seconds"  ref="uCode" @change="codeChange"></u-code>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				newPhone: '',
				code: '',
			},
			Phone:'',
			tips: '',
			seconds: 60,
			realphone:""
		};
	},
	onLoad(e) {
		this.realphone = e.phone
	},
	methods: {
		rightClick(){
			if(this.Phone != this.realphone ){
				return this.$Show.show('原手机号不正确')
			}
			
			if(!this.$utils.checkModbile(this.form.newPhone)){
				return this.$Show.show('手机号格式不正确')
			}
			
			if(this.form.code == '' ){
				return this.$Show.show('验证码不能为空')
			}
		
			this.$api.changePhone(this.form).then(res=>{
				console.log(res)
				if(res.needLogOut){
					this.$Show.show('修改成功');
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/login/index'
						})
					},1500)
				}else{
					this.$Show.successJump('修改成功')
				}
			})
		},
		
		//验证码相关
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				});
				
				if(!this.$utils.checkModbile(this.form.newPhone)){
					return this.$Show.show('手机号格式不正确')
				}
				
				this.$api.getPhoneCode({phone:this.form.newPhone}).then(res=>{
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				})
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		
	}
};
</script>

<style lang="scss">
.login_form {
	background-color: #fff;
	margin-top: 30rpx;
	width: 600px;
	margin: 0 auto;
	    box-shadow: 0 0 3px #ccc;
	    border-radius: 10px;
	.list {
		display: flex;
		align-items: center;
		height: 90rpx;
		border-bottom: 1px solid #f8f8f8;
		position: relative;
		.label {
			width: 140rpx;
			text-align: right;
			margin-right: 20rpx;
		}
		.sendCode{
			position: absolute;
			right: 30rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 180rpx;
			height: 60rpx;
		}
	}
	.list:last-child {
		border: none;
	}
}

.agree {
	display: flex;
	align-items: center;
	padding-left: 30rpx;
	margin: 30rpx 0;
	image {
		width: 45rpx;
		height: 45rpx;
		margin-right: 10rpx;
	}
	span {
		text-decoration: underline;
	}
}

.loginBtn {
	width: 690rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	margin: 0 auto;
	margin-top: 40rpx;
	border-radius: 10rpx;
	box-sizing: border-box;
}
</style>
